<template>
    <div>
        <div>【关键词条】</div>
        <div ref="target" class="w-full h-full"></div>
    </div>
</template>

<script setup>
import { ref, defineProps, onMounted,watch } from 'vue'
import * as echarts from 'echarts'
import 'echarts-wordcloud'
// 获取父组件传递的数据
const props = defineProps({
    data:{
        type:Object,
        required:true
    }
})

console.log(props.data)
const randomRGB = () =>{
    const r = Math.floor(Math.random() * 255)
    const g = Math.floor(Math.random() * 255)
    const b = Math.floor(Math.random() * 255)

    return `rgb(${r},${g},${b})`
}

// 初始化数据实例
let myChart = null
const target = ref(null)
onMounted(() => {
    // 实例化echarts对象
    myChart = echarts.init(target.value)
    renderChart()
})
// 构建options对象
const renderChart = () => {
    const options = {
        series:[{
            type:'wordCloud',
            sizeRange: [8, 45],//文字大小范围
            rotationRange: [-90, 90],//文字旋转角度范围
            gridSize:0,//单词之间间距
            layoutAnimation: true,//是否开启动画
            textStyle:{
                color: randomRGB,//随机字体颜色
            },
            emphasis: {
                textStyle:{
                    fontWeight:'bold',
                    color:'#000'
                }
            },
            data:props.data.datas
        }]
    }

    myChart.setOption(options)
}
// 设置 setOptions

// 数据变化时重新触发renderChart函数
watch(() => props.data, () => {
    renderChart()
})
</script>

<style lang="scss" scoped></style>